<template>
	<!-- 
	swiper中的transfrom会使fixed失效,此时用height固定高度; 
	swiper中无法触发mescroll-mixins.js的onPageScroll和onReachBottom方法,只能用mescroll-uni,不能用mescroll-body
	-->
	<!-- ref动态生成: 字节跳动小程序编辑器不支持一个页面存在相同的ref (如不考虑字节跳动小程序可固定值为 ref="mescrollRef") -->
	<!-- top的高度等于悬浮菜单tabs的高度 -->
	<mescroll-uni :ref="'mescrollRef'+i" @init="mescrollInit" :height="height" :down="downOption" @down="downCallback"
		:up="upOption" @up="upCallback" @emptyclick="emptyClick">
		<!-- 数据列表 -->
		<view v-for="(litem,lindex) in list" :key="lindex"
			style="display: flex;flex-direction: column;align-items: center;background-color: #fff;padding: 40rpx 20rpx;margin: 20rpx;border-radius: 10rpx; margin-bottom: 0;">
			<view style="display: flex;flex-direction: row;align-items: center;background-color: #fff;justify-content: space-around;width: 670rpx;">
<<<<<<< HEAD
				<view style="display: flex;flex-direction: column;justify-content: center;align-items: center;">
					<u-icon slot="icon" v-if="litem.type == 1 || litem.type == 2 || litem.type == 3  || litem.type == 4" size="80" custom-prefix='gewu' name="meituan2"></u-icon>
					<u-icon slot="icon" v-else-if="litem.type == 5" size="80" custom-prefix='gewu' name="elemo2"></u-icon>
					<u-icon slot="icon" v-else-if="litem.type == 11" size="80" custom-prefix='gewu' name="huafei-"></u-icon>
					<u-icon slot="icon" v-else size="80" custom-prefix='gewu' name="X-sensetubiaoheji_shouyi"></u-icon>
=======
				<view style="display: flex;flex-direction: column;justify-content: center;align-items: center;">
					<view class="extOrder-icon"  v-if="litem.type == 1 || litem.type == 2 || litem.type == 3  || litem.type == 4">
						<u-image  width="80rpx" height="80rpx" src="https://img.koalalf.com/icon/meituan.png"></u-image>
					</view>
					<view class="extOrder-icon"  v-else-if="litem.type == 5">
						<u-image  width="80rpx" height="80rpx" src="https://img.koalalf.com/icon/ele.png"></u-image>
					</view>
					<view class="extOrder-icon"  v-else-if="litem.type == 11">
						<u-image  width="80rpx" height="80rpx" src="https://img.koalalf.com/icon/huafei.png"></u-image>
					</view>
					<view class="extOrder-icon"  v-else>
						<u-image  width="80rpx" height="80rpx" src="https://img.koalalf.com/icon/ext-order.png"></u-image>
					</view>
>>>>>>> pingtuan
					<text style="font-size: 24rpx;margin: 20rpx 0 10rpx 0;">{{litem.type_text}}</text>
					<view v-if="litem.status == 1"
						style="width: 100rpx; height: 40rpx;background-color: #6C2A09;border-radius: 40rpx; font-size: 22rpx;line-height: 40rpx; text-align: center;color: #fff;">
						在路上</view>
					<view v-if="litem.status == 2"
						style="width: 100rpx; height: 40rpx;background-color: #19be6b;border-radius: 40rpx; font-size: 22rpx;line-height: 40rpx; text-align: center;color: #fff;">
						已结算</view>
					<view v-if="litem.status == 3"
						style="width: 100rpx; height: 40rpx;background-color: #fff;border-radius: 40rpx; font-size: 22rpx;line-height: 40rpx; text-align: center;color: #606266;">
						无佣金</view>
				</view>
				<view style="border-left: 1rpx solid #f5f5f5;padding-left: 20rpx;margin-left: 20rpx;flex: 1;">
					<view>
						<text style="font-size: 28rpx;color: #999;margin-right: 10rpx;">订单号:{{litem.order_info.number}}</text>
						<u-icon @click="copy(litem.order_info.number)" size="34" name="file-text" color="#999">
						</u-icon>
					</view>
					<view style="margin: 22rpx 0;">
						<text style="font-size: 28rpx;color: #999;margin-right: 10rpx">预估金额:</text>
						<text style="font-size: 36rpx;color: #007AFF;margin-right: 20rpx;"> +{{litem.profit}}</text>
						<text style="font-size: 28rpx;color: #999;">订单金额: ￥{{litem.order_info.pay_price}}</text>
					</view>
					<view>
						<text style="font-size: 28rpx;color: #999;margin-right: 10rpx;">消费时间:</text>
						<text style="font-size: 28rpx;color: #999;">{{litem.order_info.pay_time}}</text>
					</view>
				</view>
			</view>
			<view style="display: flex;justify-content: flex-end; padding: 0 20rpx; margin-top: 40rpx; width: 100%;align-items: center;">
				<u-avatar :src="litem.order_info.user.avatar" size="48"></u-avatar>
				<text style="font-size: 24rpx; color: #999;margin-left: 20rpx;">{{litem.order_info.user.nick_name}}</text>
<<<<<<< HEAD
			</view>
			
		</view>
	</mescroll-uni>
</template>

<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	import MescrollMoreItemMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mixins/mescroll-more-item.js";
	// import {apiGoods} from "@/api/mock.js"

	export default {
		mixins: [MescrollMixin, MescrollMoreItemMixin], // 注意此处还需使用MescrollMoreItemMixin (必须写在MescrollMixin后面)
		data() {
			return {
				pagination: {
					auto: false,
					page: 1,
					pageSize: 10,
					total: 0,
				},
				upOption: {
					auto: false,
					page: {
						size: 10 // 每页数据的数量,默认10
					},
					empty: {
						tip: '暂无相关数据'
					},
					textNoMore: "没有更多数据了"
				},
				list: [],
			}
		},
		props: {
			i: Number, // 每个tab页的专属下标 (除了支付宝小程序必须在这里定义, 其他平台都可不用写, 因为已在MescrollMoreItemMixin定义)
			index: { // 当前tab的下标 (除了支付宝小程序必须在这里定义, 其他平台都可不用写, 因为已在MescrollMoreItemMixin定义)
				type: Number,
				default () {
					return 0
				}
			},
			status: Number,
			tabs: { // 为了请求数据,演示用,可根据自己的项目判断是否要传
				type: Array,
				default () {
					return []
				}
			},
			height: [Number, String] // mescroll的高度
		},
		methods: {
			getData(page) {
				let that = this;
				this.$u.api.extOrderList({
					page,
					pageSize: this.pagination.pageSize,
					status: this.status
				}).then(res => {
					console.log(res)
					that.mescroll.endBySize(res.data.length, res.pagination.total)
					that.pagination = res.pagination;

					if (page == 1) {
						that.list = res.data
					} else {
						that.list = [...that.list, ...res.data]
					}
					that.pagination.page++
				})

			},
			upCallback() {
				this.getData(this.pagination.page)
			},
			downCallback() {
				this.pagination.page = 1;
				this.mescroll.resetUpScroll();
			},
			//点击空布局按钮的回调
			emptyClick() {
				uni.showToast({
					title: '点击了按钮,具体逻辑自行实现'
				})
			},
			copy(text) {
				let that = this;
				uni.setClipboardData({
					data: text,
					success: function() {
						console.log(1111)

					}
				});
			}
		}
	}
</script>
=======
			</view>
			
		</view>
	</mescroll-uni>
</template>

<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	import MescrollMoreItemMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mixins/mescroll-more-item.js";
	// import {apiGoods} from "@/api/mock.js"

	export default {
		mixins: [MescrollMixin, MescrollMoreItemMixin], // 注意此处还需使用MescrollMoreItemMixin (必须写在MescrollMixin后面)
		data() {
			return {
				pagination: {
					auto: false,
					page: 1,
					pageSize: 10,
					total: 0,
				},
				upOption: {
					auto: false,
					page: {
						size: 10 // 每页数据的数量,默认10
					},
					empty: {
						tip: '暂无相关数据'
					},
					textNoMore: "没有更多数据了"
				},
				list: [],
			}
		},
		props: {
			i: Number, // 每个tab页的专属下标 (除了支付宝小程序必须在这里定义, 其他平台都可不用写, 因为已在MescrollMoreItemMixin定义)
			index: { // 当前tab的下标 (除了支付宝小程序必须在这里定义, 其他平台都可不用写, 因为已在MescrollMoreItemMixin定义)
				type: Number,
				default () {
					return 0
				}
			},
			status: Number,
			tabs: { // 为了请求数据,演示用,可根据自己的项目判断是否要传
				type: Array,
				default () {
					return []
				}
			},
			height: [Number, String] // mescroll的高度
		},
		methods: {
			getData(page) {
				let that = this;
				this.$u.api.extOrderList({
					page,
					pageSize: this.pagination.pageSize,
					status: this.status
				}).then(res => {
					console.log(res)
					that.mescroll.endBySize(res.data.length, res.pagination.total)
					that.pagination = res.pagination;

					if (page == 1) {
						that.list = res.data
					} else {
						that.list = [...that.list, ...res.data]
					}
					that.pagination.page++
				})

			},
			upCallback() {
				this.getData(this.pagination.page)
			},
			downCallback() {
				this.pagination.page = 1;
				this.mescroll.resetUpScroll();
			},
			//点击空布局按钮的回调
			emptyClick() {
				uni.showToast({
					title: '点击了按钮,具体逻辑自行实现'
				})
			},
			copy(text) {
				let that = this;
				uni.setClipboardData({
					data: text,
					success: function() {
						console.log(1111)

					}
				});
			}
		}
	}
</script>

<style lang="less">
	.extOrder-icon{
		width: 80rpx;height: 80rpx; border-radius: 40rpx;overflow: hidden;
	}
</style>
>>>>>>> pingtuan
